<template>
  <div style="background: rgba(69,69,146,0.06);">
    <div
      style="z-index:2;background-color: #fff;height: 58px;display: flex;align-items: center;position:fixed;width:100%;top:0;"
    >
      <div
        @click="handleCalendarShow"
        style="display:flex;font-family: PingFangSC-Medium;font-size: 20px;
                     color: #454592;letter-spacing: 0.38px;text-align: justify;line-height: 30px;margin:12px 0 12px 28px;
                     width: 149px;height: 34px;background: rgba(69,69,146,0.06);border-radius: 17.5px;margin-left: 12px;"
      >
        <div
          style="width: 78%;display: flex;justify-content: center;align-items: center"
        >{{cal_label}}</div>
        <div style="width: 20%;display: flex;justify-content: center;align-items: center;">
          <img :src="down_cc" style="width: 24px;height: 24px;" />
        </div>
      </div>
      <div
        style="position: absolute;right: 20px;font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;line-height: 16px;"
      >
        <img :src="Combined" style="width: 11.2px;height: 12px;" />
        {{buName}}
      </div>
    </div>
    <Overlay :show="fullCalendarShow" :z-index="2" @click.self="fullCalendarShow=false">
      <Calendar v-model="day" style="position: fixed;" />
    </Overlay>
    <div
      style="width: 100%;display: flex;background: #fff;border-radius: 0 0 20px 20px;margin-top:58px;"
    >
      <div style="width: 80%;">
        <div style="padding:0px 10px 20px 28px;display: flex;flex-wrap: wrap;">
          <div
            style="margin-right:5px;width: 29px;height: 29px;display: flex;justify-content: center;align-items: center;font-family: PingFangSC-Regular;font-size: 14px;color: #666666;letter-spacing: 0.26px;text-align: justify;border-radius: 50%;"
            v-for="(item,index) in dayList"
            :key="index"
            :style="{background:day==item.day?'#31317E':'',color:day==item.day?'#fff':''}"
            @click="handleDayClick(item.day)"
          >{{item.idx}}</div>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;width: 19%;padding-top:4px;">
        <div style="margin-right:20px;">
          <img :src="left_icon" style="width: 16px;height: 16px;" @click="changeWeek('preWeek')" />
        </div>
        <div>
          <img :src="right_icon" style="width: 16px;height: 16px;" @click="changeWeek('nextWeek')" />
        </div>
      </div>
      <br />
    </div>

    <van-tabs
      v-model="activeName"
      line-width="50%"
      color="#454592"
      title-active-color="#454592"
      line-height="2px"
      @change="tabChange"
    >
      <van-tab title="总览" name="a">
        <div class="field_top">
          <div class="field_top_left">
            <img :src="warning" style="margin-top: 1px" />
          </div>
          <div class="field_top_right">此报表仅展现线上拜访相关数据</div>
        </div>
        <div class="wrapper">
          <div class="title">
            <div class="title_block"></div>
            <div class="title_text">已加微信认证医生详情</div>
          </div>

          <div class="field_tab">
            <div class="field_table">
              <span class="field_table_title1">
                <span style="margin-left: 30px;">姓名</span>
              </span>
              <span class="field_table_title2">认证总数</span>
              <span class="field_table_title3">本日新增</span>
            </div>
            <div class="field_table_detail" v-for="(item,index) in list" :key="index">
              <span class="field_table_detail_title1">
                <span style="margin-left: 25px;">{{item.emp_name}}</span>
              </span>
              <span class="field_table_detail_title2">{{item.num_op_cert_cot_hcp}}/{{item.num_tgt_hcp}}</span>
              <span class="field_table_detail_title3">{{item.num_new_cert_cot_hcp}}</span>
            </div>
          </div>
          <div
            @click="navBack"
            style="width: 100%;background: #454592;height: 48px;border-radius: 2px;display: flex;justify-content: center;margin-top:20px;
                        align-items: center;font-family: PingFangSC-Regular;font-size: 16px;color: #FFFFFF;letter-spacing: 0.3px;text-align: center;"
          >返回</div>
        </div>
      </van-tab>
      <van-tab title="HCP明细" name="b" title-style="font-size: 16px;" style="min-height: 77vh;">
        <div class="field_top">
          <div class="field_top_left"><img :src="warning" style="margin-top: 1px"/></div>
          <div class="field_top_right">此报表仅展现线上拜访相关数据</div>
        </div>
        <div style="padding: 12px;display: flex;">
          <div class="condition">
            <div v-for="(item, index) in productList" :key="index"
                 :class="condition_selected==index?'condition_check':'condition_uncheck'"
                 :style="item.select?'color: #454592;background: rgba(69, 69, 146, 0.1);':'',index%2?'border-top-right-radius:30px;border-bottom-right-radius:30px;':'border-top-left-radius:30px;border-bottom-left-radius:30px;'"
                 style="width:50%;height:100%;"
                 @click="conditionChange(index)">
              {{ item.name }}
            </div>
          </div>
          <div style="width:12%;display:flex;justify-content:center;align-items:center;">
            <img :src="search_icon" style="width:20px;height:20px;" @click="showSearchInput"/>
          </div>
          <div style="width: 12%;display: flex;justify-content: center;align-items: center;position: relative;">
            <img :src="filter_icon" style="width:20px;height:20px;" @click="openFilter"/>
            <div style="color:rgb(69, 69, 146);position: absolute;width: 14px;
              height: 14px;border-radius: 50%;top:3px;right:-7px;border:1px solid rgb(69, 69, 146);display: flex;
              justify-content: center;align-items: center;font-size: 12px;" v-if="selectCount>0">
              {{ selectCount }}
            </div>
          </div>
        </div>
        <div v-if="!filter_window">
          <div style="border-bottom:1px solid #ccc;" v-if="search_input_visible"></div>
          <div style="display: flex;flex-direction: row;" v-if="search_input_visible">
            <div class="search">
              <img :src="search_icon" @click="clickSearch"/>
              <form action="javasearchTextscript:void 0" style="display: flex;">
                <input class="input" @input="inputSearch($event)" :value="searchText" type="search"
                       @keyup.13="clickSearch"
                       placeholder="搜索医生"/>
                <img :src="close_icon" style="width: 20px;height:20px;" v-if="searchText" @click="searchText=''"/>
              </form>
            </div>
            <div class="cancel" @click="hideSearchInput">
              取消
            </div>
          </div>
          <div style="border-bottom:1px solid #ccc;" v-if="search_input_visible"></div>
          <div class="field_tab">
            <div class="field_table">
                <span class="field_table_title4">
                  <span style="margin-left: 4px;">姓名</span>
                </span>
              <span class="field_table_title5">有效触达数</span>
              <span class="field_table_title6">详情</span>
            </div>
            <div  v-for="(item,index) in listhcp" :key="index">
              <div style="display: flex;flex-direction: row;border-bottom: 1px solid #DDDCE1;margin: 10px 0 0 0;">
                <div class="title_top1">
                  <div class="titleicon"></div>
                  <div class="title_right" style="display: flex;align-items: center;">{{item.representativeName}}</div>
                </div>
                <div class="title_top2" v-if="item.showTableDetail==true">
                  <img :src="down_cc" style="display: flex;align-items: center;transform: rotate(180deg)" @click="ShowchangeTable(index)"/>
                </div>
                <div class="title_top2" v-else>
                  <img :src="down_cc" style="display: flex;align-items: center;" @click="ClosechangeTable(index)"/>
                </div>
              </div>
              <div style="margin-top:10px " v-if="item.showTableDetail==true">
                <div class="field_table_detail" v-for="(item,index) in item.detailList" :key="index">
                    <span class="field_table_detail_title4">
                      <span style="width: 8px;margin-right: 4px;height: 100%;display: flex;align-items: center;" v-if="item.ifCerHcp==1">
                        <img :src="star_icon" style="width: 8px;height: 8px;"/>
                      </span>
                      <span>{{ item.hcpName }}</span>
                      <span style="width: 8px;height: 100%;margin-left: 4px;display: flex;" v-if="item.ifCotHcp==1">
                        <img :src="wechat_icon" style="width: 18px;height: 18px;"/>
                      </span>
                    </span>
                  <span v-if="condition_selected==0">
                    <span class="field_table_detail_title2">{{ item.numDtdTotEngage }}</span>
                </span>
                  <span v-else>
                    <span class="field_table_detail_title2">{{ item.numMonTotEngage }}</span>
                </span>
                  <span class="field_table_detail_title6" @click="JumpDetail(item.hcpEtmsId)">
                      <img :src="arrow_right" style="width: 16px;height: 16px;"/>
                    </span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div v-if="filter_window" style="width: 100%;height: 65vh;z-index:3;">
          <div style="padding: 8px 20px 0px;">
            <div class="title_top">
              <div class="titleicon"></div>
              <div class="title_right" style="display: flex;align-items: center;">客户状态
                <img :src="star_icon" style="padding-left:10px;width: 8px;height: 8px;"/>
              </div>
            </div>
            <div class="screenList">
              <div v-for="(item, index) in certiList" :key="index" @click="selectCerti(index)"
                   :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                   class="screen_item">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div style="padding: 8px 20px 0px;">
            <div class="title_top">
              <div class="titleicon"></div>
              <div class="title_right" style="display: flex;align-items: center;">是否加微信
                <img :src="wechat_icon" style="padding-left:10px;width: 18px;height: 18px;"/>
              </div>
            </div>
            <div class="screenList">
              <div v-for="(item, index) in certiWxList" :key="index" @click="selectWxCerti(index)"
                   :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                   class="screen_item">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div style="padding: 8px 20px 0px;">
            <!--            <div class="title_top">-->
            <!--              <div class="titleicon"></div>-->
            <!--              <div class="title_right" style="display: flex;align-items: center;">医生分组-->
            <!--              </div>-->
            <!--            </div>-->
            <!--            <div class="screenList">-->
            <!--              <div v-for="(item, index) in doctorList" :key="index" @click="selectDoctor(index)"-->
            <!--                   :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"-->
            <!--                   class="screen_item">-->
            <!--                {{ item.name }}-->
            <!--              </div>-->
            <!--            </div>-->

          </div>
          <div style="position: fixed;z-index: 9999;bottom: 0;width: 100%;">
            <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 20px;">
              <div class="button" @click="closeFilter"
                   :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">取消
              </div>
              <div class="button" @click="doFilter"
                   :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;'">查看
              </div>
            </div>
          </div>
        </div>
      </van-tab>
<!--      <van-tab title="HCP明细" name="b">-->
<!--        <div-->
<!--          style="width: 100%;height: 800px;display: flex;justify-content: center;font-family: PingFangSC-Semibold;font-size: 16px;color: #454592;letter-spacing: 0.3px;-->
<!--text-align: justify;line-height: 24px;"-->
<!--        >-->
<!--          <div-->
<!--            style="margin-top:150px;display: flex;justify-items: center;align-items: center;flex-direction: column;"-->
<!--          >-->
<!--            <img :src="unrelease" style="width: 261.6px;height: 177.6px" />-->
<!--            <div style="margin-top:19.4px;">即将上线！敬请期待！</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-tab>-->
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Loading } from "vant";
import left_icon from "@assets/icon/chevron_left.svg";
import right_icon from "@assets/icon/chevron_right.svg";
import F2 from "@antv/f2";

import _ from "lodash";
import down_cc from "@assets/icon/34.svg";
import unrelease from "@assets/image/coming_soon.png";
import { Tab, Tabs, Circle, Overlay } from "vant";
// Vue.use(infiniteScroll)
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Circle);
import dayjs from "dayjs";
import warning from "@assets/icon/warning.svg";
import info from "@assets/icon/16.svg";
import right from "@assets/icon/right.svg";
import down from "@assets/icon/down.svg";
import up from "@assets/icon/up.svg";
import Calendar from "@components/snfDashboardCalendar";
import {dmDoctor, getHcpDetail} from "@api/schedule";
import Combined from "@assets/icon/Combined Shape.svg";
import arrow_right from "@assets/icon/arrow_right.svg";
import wechat_icon from "@assets/icon/wechat.svg";
import star_icon from "@assets/icon/star.svg";
import close_icon from "@assets/icon/close.svg";
import filter_icon from "@assets/icon/21.svg";
import search_icon from "@assets/icon/search.svg";
import env from "@config/env";
export default {
  name: "DM",
  components: {
    Tab,
    Tabs,
    Calendar,
    Loading,
    Overlay,
  },
  data() {
    return {
      clientWidth: document.documentElement.clientWidth, // 页面宽度
      arrow_right:arrow_right,
      wechat_icon:wechat_icon,
      star_icon:star_icon,
      close_icon:close_icon,
      searchText:'',
      listhcp:[],
      certiList: [
        {
          name: '已认证',
          code:1,
          select: false,
        },
        {
          name: '未认证',
          code:0,
          select: false,
        },
      ],
      certiWxList: [
        {
          name: '已加微信',
          code:1,
          select: false,
        },
        {
          name: '未加微信',
          code:0,
          select: false,
        },
      ],
      doctorList: [
        {
          name: '全部',
          select: false,
        },
        {
          name: '分组一',
          select: false,
        },
        {
          name: '分组二',
          select: false,
        },
      ],
      filter_window:false,
      filter_icon:filter_icon,
      search_input_visible:false,
      search_icon:search_icon,
      condition_selected:0,
      productList: [
        {
          name: '当日明细',
        },
        {
          name: '月累计明细',
        }
      ],
      weekday: "",
      list: [],
      unrelease: unrelease,
      fullCalendarShow: false,
      left_icon: left_icon,
      right_icon: right_icon,
      dayList: [],
      down_cc: down_cc,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeName: "a",
      activeNames: ["1"],
      info: info,
      right: right,
      warning: warning,
      down: down,
      up: up,
      current_num: 100,
      month_num: 100,
      current_rate: 10,
      month_rate: 20,
      day: "",
      tableShow: true,
      buName: sessionStorage.getItem("email"),
      cal_label: "",
      Combined: Combined,
      closeTableShow: false,
      gradientColor: {
        "2%": "#EEEEFF",
        "17%": "#BCBCFB",
        "49%": "#9292F9",
        "80%": "#8282FA",
        "100%": "#8888F2",
      },
    };
  },
  methods: {
    JumpDetail(hcpEtmsId){
      let url = env.ONE_STEP_SEND +hcpEtmsId
      window.location.href = url
    },
    doFilter() {
      //TODO 调用接口查询数据
      this.filter_window = false
      this.listhcp=[];
      this.gethcp();
    },
    closeFilter() {
      this.filter_window = false
    },
    selectCerti(index) {
      this.certiList[index].select = !this.certiList[index].select
    },
    selectWxCerti(index) {
      this.certiWxList[index].select = !this.certiWxList[index].select
    },
    selectDoctor(index) {
      this.doctorList[index].select = !this.doctorList[index].select
    },
    ShowchangeTable(index){
      this.listhcp[index].showTableDetail=false;
    },
    ClosechangeTable(index){
      this.listhcp[index].showTableDetail=true;
    },
    gethcp(){
      let certCode="";
      this.certiList.forEach((item, idx) => {
        if(item.select ==true)
        {
          certCode=item.code;
        }
      })
      if(this.certiList[0].select==true && this.certiList[1].select==true){
        certCode="";
      }

      let certWXCode="";
      this.certiWxList.forEach((item, idx) => {
        if(item.select ==true)
        {
          certWXCode=item.code;
        }
      })
      if(this.certiWxList[0].select==true && this.certiWxList[1].select==true){
        certWXCode="";
      }

      let dayTime=dayjs(this.day).format('YYYY-MM-DD');
      //组装参数
      let param= {
        email:'',
        dmEmail:this.buName,
        day:dayTime,
        hcpName:this.searchText,
        ifCerHcp:certCode,
        ifCotHcp:certWXCode
        // email:'',
        // dmEmail:'long1.chen@sanofi.com',
        // day:'2020-9-28',
        // hcpName:'',
        // ifCerHcp:'',
        // ifCotHcp:''
      }
      getHcpDetail(param).then(res => {
        if(res.successful==true){
          for(let i =0 ;i<res.data.length;i++){
            this.listhcp.push({
              representativeName:res.data[i].representativeName,
              showTableDetail:true,
              detailList:res.data[i].detailList
            })
          }
        }
      })
    },
    hideSearchInput() {
      this.search_input_visible = false
    },
    // 输入搜索条件
    inputSearch(e) {
      this.searchText = e.currentTarget.value
    },
    //点击放大镜 根据筛选条件查询数据
    clickSearch() {
      this.listhcp=[];
      this.gethcp();
    },
    openFilter() {
      this.filter_window = !this.filter_window
    },
    showSearchInput() {
      this.search_input_visible = true
    },
    conditionChange(index) {
      this.condition_selected = index
    },

    changeWeek(type) {
      switch (type) {
        case "preWeek": {
          this.weekday = dayjs(this.weekday)
            .subtract(7, "day")
            .format("YYYY-M-D");
          this.getWeekDay();
          break;
        }
        case "nextWeek": {
          this.weekday = dayjs(this.weekday).add(7, "day").format("YYYY-M-D");
          this.getWeekDay();
          break;
        }
      }
    },
    navBack() {
      this.$router.back();
    },
    handleCalendarShow() {
      this.fullCalendarShow = !this.fullCalendarShow;
    },
    tabChange(name, title) {},
    showTable() {
      this.tableShow = false;
      this.closeTableShow = true;
    },
    closeTable() {
      this.tableShow = true;
      this.closeTableShow = false;
    },
    getWeekDay() {
      this.dayList = [];
      let weekStart = dayjs(this.weekday).startOf("week").format("YYYY-M-D");

      for (let i = 0; i < 7; i++) {
        this.dayList.push({
          idx: dayjs(weekStart).add(i, "day").format("D"),
          day: dayjs(weekStart).add(i, "day").format("YYYY-M-D"),
        });
      }
    },
    handleDayClick(day) {
      this.day = day;
      //TODO 调用接口获取数据
    },

    getDaily() {
      this.list = [];
      dmDoctor({
        email: this.$route.query.email,
        day: dayjs(this.day).format("YYYY-MM-DD"),
      }).then((res) => {
        if (res.successful) {
          if (res.data) {
            this.list = res.data;
          } else {
            alert("团队数据未同步");
          }
        } else {
          alert("获取团队数据失败");
        }
      });
    },
  },
  mounted() {
    this.loading = false;
    this.day = dayjs(this.$route.query.day).format("YYYY-M-D");
    this.weekday = this.day;
  },
  watch: {
    day(newval, oldval) {
      this.getWeekDay();
      this.getDaily();
      this.gethcp(),
      this.weekday = this.day;
      this.cal_label = dayjs(newval).format("YYYY/MM");
    },
  },
  computed: {
    selectCount() {
      let c_count = this.certiList.filter(item => item.select).length
      let w_count = this.certiWxList.filter(item => item.select).length
      let d_count = this.doctorList.filter(item => item.select).length
      return c_count + w_count + d_count
    }
  }
};
</script>

<style scoped lang="scss">
.title_top {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 14px 0 14px;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  height: 36px;
  border-radius: 3px;
}
.screen_item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 16px;
  margin: 0 8px 8px 0;
  font-size: 12px;
  color: #666666;
  border: 1px solid #666666;
  border-radius: 20px;
}
.screenList {
  display: flex;
  flex-wrap: wrap;
}
.field_table_detail_title4 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
  height: inherit;
}

.field_table_detail_title5 {
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: block;
  float: left;
}

.field_table_detail_title6 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  float: left;
}
.titleicon {
  height: 20px;
  width: 4px;
  background: #ACB318;
  margin-right: 8px;
}
.title_top1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 14px;
}
.title_top2 {
  padding: 0 0 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 10px;
}
.field_table_title4 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.field_table_title5 {
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field_table_title6 {
  width: 35%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cancel {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ACB318;
  letter-spacing: 0.26px;
  text-align: justify;
  line-height: 16px;
  display: flex;
  align-items: center;
}
input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
.input {
  flex: 1;
  width: 250px;
  border-width: 0;
  background: none;
  margin-left: 5px;
  color: #666666;
  opacity: 0.6;
  font-size: 14px;
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 12px;
  width: 85%;
  height: 45px;
}
.condition_uncheck {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.condition_check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #454592;
  background: rgba(69, 69, 146, 0.1);
}
.condition {
  font-family: PingFangSC-Regular;
  display: flex;
  flex-direction: row;
  flex: 2;
  max-width: 76%;
  height: 30px;
  border: 1px solid #454592;
  border-radius: 30px;
  font-size: 12px;

}

.wrapper {
  padding: 20px;
  min-height: 78vh;
}

.field_top {
  width: 100%;
  height: 24px;
  background: rgba(69, 69, 146, 0.06);
  margin-top: 1.2%;
}

.field_top_left {
  margin-left: 5.3%;
  float: left;
  margin-top: 3px;
}

.field_top_right {
  float: left;
  margin-left: 0.4%;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.22px;
  text-align: justify;
  line-height: 24px;
}

.title {
  width: 100%;
  height: 24px;
}

.title_block {
  background: #acb318;
  width: 4px;
  height: 20px;
  float: left;
  margin-left: 7px;
}

.title_text {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 21px;
  margin-left: 12px;
  float: left;
}

.title_detail {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #acb318;
  letter-spacing: 0.26px;
  text-align: center;
  float: right;
}

.field_item {
  width: 100%;
  height: 212px;
  box-shadow: 2px 4px 10px 0 rgba(38, 38, 98, 0.3);
  background-image: linear-gradient(#5656b5, #31317e);
  border-radius: 4px 4px 0px 0px;
  margin-top: 0.8%;
  display: flex;
  flex-direction: column;
}

.field_item_part {
  width: 50%;
  height: 212px;
  float: left;
}

.field_item_part_title {
  margin-top: 15px;
  margin-left: 20px;
}

.field_item_part_title_font {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  float: left;
}

.field_item_part_title_icon {
  float: left;
  margin-top: 4px;
  margin-left: 5px;
}

.field_click {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4848b4, #7f7fdd);
  border-radius: 0 0 4px 4px;
}

.field_click_title {
  width: 100%;
  opacity: 0.8;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0.26px;
  text-align: center;
  padding-top: 7px;
}

.field_click_icon {
  width: 100%;
  text-align: center;
}

.slot1 {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0.6px;
  line-height: 48px;
  margin-top: 25px;
  text-align: center;
}

.slot2 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.22px;
  text-align: center;
  margin-top: 3px;
}

.slot3 {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.26px;
  text-align: center;
  margin-top: 3px;
}

.field_tooltip {
  width: 100%;
  background: #ffffff;
  margin-top: 10px;
}

.field_foot {
  width: 100%;
  margin-top: 30px;
  height: 260px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.field_foot_part {
  width: 48%;
  float: left;
}

.field_foot_part_title {
  width: 100%;
  height: 22px;
  position: relative;
}

.field_foot_part_block {
  background: #acb318;
  width: 4px;
  height: 20px;
  float: left;
  margin-left: 7px;
}

.field_foot_part_text {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 21px;
  margin-left: 7px;
  float: left;
}

.field_foot_part_icon {
  float: right;
  position: absolute;
  right: 0;
}

.field_foot_view {
  width: 100%;
  height: 76px;
  background: #ffffff;
  margin-top: 10px;
}

.field_foot_view_top {
  padding-top: 12px;
  padding-left: 15px;
}

.field_foot_view_top1 {
  opacity: 0.41;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0.26px;
  text-align: justify;
}

.field_foot_view_top2 {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #454592;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  padding-left: 5px;
}

.field_foot_view_top3 {
  opacity: 0.8;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0.22px;
  text-align: justify;
  line-height: 16px;
}

.field_foot_view_bottom {
  padding-top: 5px;
  padding-left: 15px;
}

.field_foot_view_bottom1 {
  opacity: 0.41;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0.26px;
  text-align: justify;
}

.field_foot_view_bottom2 {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #454592;
  letter-spacing: 0.3px;
  text-align: justify;
  line-height: 24px;
  padding-left: 5px;
}

.field_foot_middle {
  width: 4%;
  float: left;
  height: 80px;
}

.field_foot_part_icon {
  margin-top: 2px;
}

.field_tab {
  background: rgba(69, 69, 146, 0.06);
  padding: 0 8px;
}

.field_table {
  width: 100%;
  height: 50px;
}

.field_table_title1 {
  width: 25%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: left;
  line-height: 50px;
  float: left;
  display: block;
}

.field_table_title2 {
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 50px;
  float: left;
  display: block;
}

.field_table_title3 {
  width: 45%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 50px;
  float: left;
  display: block;
}

.field_table_detail {
  width: 100%;
  height: 40px;
  background: #ffffff;
  margin-bottom: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(49, 49, 126, 0.06);
  border-radius: 4px;
}

.field_table_detail_title1 {
  opacity: 0.6;
  width: 25%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: left;
  line-height: 40px;
  display: block;
  float: left;
  height: inherit;
}

.field_table_detail_title2 {
  opacity: 0.6;
  width: 30%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  display: block;
  float: left;
}

.field_table_detail_title3 {
  opacity: 0.6;
  width: 45%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.26px;
  text-align: center;
  line-height: 40px;
  float: left;
}

.field_click_up {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #4848b4, #7f7fdd);
  border-radius: 0 0 4px 4px;
  margin-top: 20px;
}

/deep/ .van-tab {
  background: rgba(69, 69, 146, 0.06) !important;
}

.chart-wrapper {
  position: relative;
}

.f2-tooltip {
  -moz-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 0.5px 0.5px rgba(0, 0, 0, 0.3);
  position: absolute;
  z-index: 99;
  background-color: #1890ff;
  padding: 5px;
  border-radius: 3px;
  text-align: center;
  width: 120px;
  opacity: 0;
}

.f2-tooltip div {
  display: block;
  color: #fff;
}

.f2-tooltip div:nth-child(1) {
  font-size: 11px !important;
}

.f2-tooltip div:nth-child(2) {
  font-size: 13px !important;
}
</style>